<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: #fff;
        }
        .main-content {
            height: calc(100vh - 60px);
            overflow-y: auto;
        }
        .nav-item {
            position: relative;
        }
        .nav-item:not(:last-child):after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            height: 50%;
            width: 1px;
            background-color: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <nav class="bg-gradient-to-r from-red-600 to-red-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="logo flex items-center">
                        <i class="fas fa-fire-extinguisher mr-2"></i>
                        <span>火灾调查知识库平台</span>
                    </div>
                </div>
                
                <div class="flex items-center space-x-1">
                    <a href="index.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-search mr-1"></i> 检索
                    </a>
                    <a href="knowledge-graph.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-project-diagram mr-1"></i> 火调知识图谱
                    </a>
                    <a href="ai-search.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-robot mr-1"></i> AI检索功能
                    </a>
                    <a href="report-generator.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-file-alt mr-1"></i> 火调报告生成
                    </a>
                    <a href="model-cockpit.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-tachometer-alt mr-1"></i> 火调大模型驾驶舱
                    </a>
                    <a href="user-center.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user mr-1"></i> 个人中心
                    </a>
                    <a href="login.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-sign-in-alt mr-1"></i> 登录
                    </a>
                    <a href="register.html" class="nav-item text-white hover:bg-red-700 px-3 py-2 rounded-md text-sm font-medium flex items-center">
                        <i class="fas fa-user-plus mr-1"></i> 注册
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容区 - 检索页面 -->
    <div class="main-content container mx-auto px-4 py-6">
        <div class="bg-white rounded-lg shadow p-6">
            <!-- 搜索框 -->
            <div class="mb-6">
                <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                    <div class="flex-1">
                        <div class="relative">
                            <input type="text" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent" placeholder="请输入关键词进行检索...">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <i class="fas fa-search text-gray-400"></i>
                            </div>
                            <button class="absolute inset-y-0 right-0 px-4 text-white bg-red-600 rounded-r-lg hover:bg-red-700">
                                搜索
                            </button>
                        </div>
                    </div>
                    <div class="mt-4 md:mt-0">
                        <select class="px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent">
                            <option value="all">全文</option>
                            <option value="title">主题</option>
                            <option value="summary">摘要</option>
                            <option value="keywords">关键词</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 分类选项卡 -->
            <div class="mb-6">
                <div class="border-b border-gray-200">
                    <nav class="-mb-px flex space-x-8">
                        <a href="#" class="border-red-500 text-red-600 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            全部
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            消防法律法规
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            火调报告
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            政府文件
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            消防安全
                        </a>
                        <a href="#" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm">
                            消防设备
                        </a>
                    </nav>
                </div>
            </div>

            <!-- 筛选条件 -->
            <div class="bg-gray-50 p-4 rounded-lg mb-6">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间:</span>
                        <select class="px-3 py-1 rounded border border-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                            <option>全部</option>
                            <option>最近一周</option>
                            <option>最近一月</option>
                            <option>最近一年</option>
                            <option>自定义</option>
                        </select>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">地区:</span>
                        <select class="px-3 py-1 rounded border border-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                            <option>全部</option>
                            <option>北京</option>
                            <option>上海</option>
                            <option>广州</option>
                            <option>深圳</option>
                        </select>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">事故类型:</span>
                        <select class="px-3 py-1 rounded border border-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                            <option>全部</option>
                            <option>电气火灾</option>
                            <option>燃气火灾</option>
                            <option>化学品火灾</option>
                            <option>森林火灾</option>
                        </select>
                    </div>
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">法规类别:</span>
                        <select class="px-3 py-1 rounded border border-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                            <option>全部</option>
                            <option>国家法规</option>
                            <option>地方法规</option>
                            <option>行业标准</option>
                            <option>技术规范</option>
                        </select>
                    </div>
                    <button class="px-4 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                        应用筛选
                    </button>
                    <button class="px-4 py-1 border border-gray-300 text-gray-600 rounded hover:bg-gray-100">
                        重置
                    </button>
                </div>
            </div>

            <!-- 搜索结果列表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                标题
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                作者
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                来源
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                发布时间
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                热度
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">电气火灾调查报告与分析方法研究</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">李明</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">消防技术期刊</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">2023-05-12</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-fire text-red-500 mr-1"></i>
                                    <span>1258</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">《中华人民共和国消防法》解析与实施指南</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">张华</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">消防安全出版社</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">2023-03-05</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-fire text-red-500 mr-1"></i>
                                    <span>2145</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">商业综合体消防安全管理规范</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">王建国</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">国家消防总局</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">2023-01-15</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-fire text-red-500 mr-1"></i>
                                    <span>958</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">高层建筑火灾案例分析与防范措施研究</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">陈军</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">消防科学与技术</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">2022-12-28</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-fire text-red-500 mr-1"></i>
                                    <span>1752</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">燃气管道泄漏引发爆炸火灾事故分析</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">刘燕</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">安全工程学报</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">2022-11-10</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center text-sm text-gray-500">
                                    <i class="fas fa-fire text-red-500 mr-1"></i>
                                    <span>1458</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="detail.html" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                                <a href="#" class="text-green-600 hover:text-green-900">订阅</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="mt-6 flex justify-between items-center">
                <div class="text-sm text-gray-700">
                    显示第 <span class="font-medium">1</span> 至 <span class="font-medium">5</span> 项结果，共 <span class="font-medium">180</span> 项
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-red-600 text-sm font-medium text-white hover:bg-red-700">
                            1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            3
                        </a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            18
                        </a>
                        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 可以在这里添加一些交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            console.log('火灾调查知识库平台已加载');
        });
    </script>
</body>
</html> 